<%@tag import="java.util.Enumeration"%>
<%@tag import="com.zq.it.cms.common.Constants"%>
<%@tag import="org.apache.commons.lang.StringUtils"%>
<%@tag import="java.util.UUID"%>
<%@ tag pageEncoding="UTF-8" display-name="page" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ attribute name="pageData" type="org.springframework.data.domain.Page" required="true" rtexprvalue="true"%>
<%@ attribute name="action" type="java.lang.String" required="true" rtexprvalue="true"%>
<%@ attribute name="method" type="java.lang.String" required="false" rtexprvalue="true"%>
<%@ attribute name="search" type="java.lang.Boolean" required="false" rtexprvalue="true"%>
<%@ attribute name="sortTable" type="java.lang.String" required="false" rtexprvalue="true"%>
<%
	if(StringUtils.isBlank(action)){
		action = "";
	}
	if(StringUtils.isBlank(method) || !"post".equals(method)){
		method = "get";
		request.setAttribute("method", method);
	}
	if(search == null){
		search = false;
		request.setAttribute("search", search);
	}
	String pageId = UUID.randomUUID().toString().replace("-", "");
	request.setAttribute("pageId", pageId);
%>
<form action="${action}" method="${method}" id="${pageId}">
<%
if(search != null && search){
	Enumeration names = request.getAttributeNames();
	while(names.hasMoreElements()) {
		String name = (String) names.nextElement();
		if(StringUtils.startsWith(name, Constants.SEARCH_PREFIX)){
			String[] values = (String[]) request.getAttribute(name);
			for(String value : values) {
				if(StringUtils.isNotBlank(value)) {
					out.println("<input type=\"hidden\" name=\""+ name +"\" value=\""+ value +"\"/>");
				}
			}
		}
	}
}
%>
	<input type="hidden" name="page_number" value="1"/>
	<input type="hidden" name="page_sort" value="${page_sort[0]}"/>
	<div class="row mt-3">
		<div class="col-md-4"></div>
		<div class="text-center col-md-4">
			<c:if test="${pageData.isFirst()}">
				<a href="javascript:void(0);" class="btn btn-default btn-circle btn-xs" disabled="disabled"><i class="glyphicon glyphicon-backward"></i></a>
			</c:if>
			<c:if test="${not pageData.isFirst()}">
				<a href="javascript:void(0);" onclick="page${pageId}(1);" class="btn btn-default btn-circle btn-xs"><i class="glyphicon glyphicon-backward"></i></a>
			</c:if>
			<c:if test="${pageData.hasPrevious()}">
				<a href="javascript:void(0);" onclick="page${pageId}(${pageData.number});" class="btn btn-default btn-circle btn-xs"><i class="glyphicon glyphicon-chevron-left"></i></a>
			</c:if>
			<c:if test="${not pageData.hasPrevious()}">
				<a href="javascript:void(0);" class="btn btn-default btn-circle btn-xs" disabled="disabled"><i class="glyphicon glyphicon-chevron-left"></i></a>
			</c:if>
			<input type="phone" value="${pageData.number + 1}" class="form-control input-sm px-2 mx-3 text-center" maxlength="4" style="width: 40px;display: inline-block;vertical-align: middle;">
			<span class="align-middle mr-3">共 ${pageData.totalPages} 页</span>
			<c:if test="${pageData.hasNext()}">
				<a href="javascript:void(0);" onclick="page${pageId}(${pageData.number + 2});" class="btn btn-default btn-circle btn-xs"><i class="glyphicon glyphicon-chevron-right"></i></a>
			</c:if>		
			<c:if test="${not pageData.hasNext()}">
				<a href="javascript:void(0);" class="btn btn-default btn-circle btn-xs" disabled="disabled"><i class="glyphicon glyphicon-chevron-right"></i></a>
			</c:if>
			<c:if test="${pageData.isLast()}">
				<a href="javascript:void(0);" class="btn btn-default btn-circle btn-xs" disabled="disabled"><i class="glyphicon glyphicon-forward"></i></a>
			</c:if>
			<c:if test="${not pageData.isLast()}">
				<a href="javascript:void(0);" onclick="page${pageId}(${pageData.totalPages});" class="btn btn-default btn-circle btn-xs"><i class="glyphicon glyphicon-forward"></i></a>
			</c:if>
		</div>
		<div class="col-md-4 text-center text-md-right mt-3 mt-md-0">
			<span class="align-middle">
			${pageData.number * pageData.size + 1} - ${pageData.number * pageData.size + pageData.numberOfElements}　共 ${pageData.totalElements} 条 
			每页 
			</span>
			<select name="page_size" class="form-control input-xs" style="width: 70px;display: inline-block;vertical-align: middle;" onchange="page${pageId}(1);">
				<c:forEach var="pSize" items="10,20,50,100,200,400,800">
					<option value="${pSize}" <c:if test="${pSize == pageData.size}">selected="selected"</c:if>>${pSize}</option>
				</c:forEach>
			</select>
			<span class="align-middle">
			 条
			</span>
		</div>
	</div>
</form>
<script type="text/javascript" src="/static/beyond/js/input-mask/jquery.inputmask.js"></script>
<script type="text/javascript" src="/static/beyond/js/input-mask/jquery.inputmask.numeric.extensions.js"></script>
<script type="text/javascript" src="/static/beyond/js/input-mask/jquery.inputmask.extensions.js"></script>
<script type="text/javascript">
$(function(){
	$("#${pageId} input[type='phone']").inputmask({alias: "integer"});
	$("#${pageId} input[type='phone']").change(function(){
		if(this.value && this.value >= 1 && this.value <= ${pageData.totalPages}){
			page${pageId}(this.value);
		}else{
			this.value = ${pageData.number + 1};
		}
	});
});
function page${pageId}(page){
	var form = document.getElementById("${pageId}");
	if(page && !isNaN(page) && page >= 1 && page <= ${pageData.totalPages}){
		form.page_number.value = page;
	}
	form.submit();
}
</script>
<c:if test="${not empty sortTable}">
<script type="text/javascript">
	$(function(){
		var form = document.getElementById("${pageId}");
		var sort = form.page_sort.value || "";
		if(!/^\w+(,(asc|desc))?$/.test(sort)){
			sort = null;
		}else{
			sort = sort.split(",");
		}
		$("${sortTable} th[col]").each(function(){
			var col = $(this).attr("col");
			if(col && col.trim().length > 0){
				$(this).addClass("position-relative");
				if(sort && col == sort[0]){
					$(this).addClass("success");
					if(sort.length == 1 || sort[1] != "desc"){
						$(this).data("sort-dir", "asc")
						$(this).append("&nbsp;&nbsp;&nbsp;<span class='position-absolute ml-1 sort-span' style='font-size:15px;right: 5px;'><i class='fa fa-sort-asc position-absolute' style='top:3px;'></i><i class='fa fa-sort-desc text-lightgray'></i></span>");
					}else{
						$(this).data("sort-dir", "desc")
						$(this).append("&nbsp;&nbsp;&nbsp;<span class='position-absolute ml-1 sort-span' style='font-size:15px;right: 5px;'><i class='fa fa-sort-asc position-absolute text-lightgray' style='top:3px;'></i><i class='fa fa-sort-desc'></i></span>");
					}
				}else{
					$(this).append("&nbsp;&nbsp;&nbsp;<span class='position-absolute ml-1 sort-span d-none' style='font-size:15px;right: 5px;'><i class='fa fa-sort-asc position-absolute' style='top:3px;'></i><i class='fa fa-sort-desc'></i></span>");
				}
			}
		}).on({
			mouseover: function(e){
				var col = $(this).attr("col");
				if(col && col.trim().length > 0){
					$(this).addClass("success");
					$(this).find(".sort-span").removeClass("d-none");
				}
			},
			mouseout: function(){
				var col = $(this).attr("col");
				if(col && col.trim().length > 0){
					if($(this).data("sort-dir")){
						return;
					}
					$(this).removeClass("success");
					$(this).find(".sort-span").addClass("d-none");
				}
			},
			click: function(){
				var col = $(this).attr("col");
				if(col && col.trim().length > 0){
					var dir = $(this).data("sort-dir") || "desc";
					if(dir != "desc"){
						dir = "desc";
					}else{
						dir = "asc";
					}
					var form = document.getElementById("${pageId}");
					form.page_sort.value = col + "," + dir;					
					form.submit();
				}
			}
		});
	});
</script>
</c:if>